<template>
  <view class="qaStatics">
    <view class="top">
      <image
        class="top-icon"
        src="@/static/images/home/answer_statics.png"
      ></image>
      <view class="top-title">答疑统计</view>
      <view class="top-right">
        <view class="top-right-arrowLeftClick" @tap="selectPreMonth"></view>
        <up-icon
          name="arrow-left"
          class="top-right-arrowLeft"
          :color="preEnable ? '#666' : '#999'"
          size="14"
          @click="selectPreMonth"
        ></up-icon>
        <view class="top-right-title">{{ staticsDateInfo }}</view>
        <up-icon
          name="arrow-right"
          class="top-right-arrowRight"
          :color="nextEnable ? '#666' : '#999'"
          size="14"
          @click="selectNextMonth"
        ></up-icon>
        <view class="top-right-arrowRightClick" @tap="selectNextMonth"></view>
      </view>
    </view>
    <StaticsGrid :list="list" />
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { computed, ref } from "vue";
import StaticsGrid from "./staticsGrid.vue";
import { onMounted } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const list = computed(() => {
  return [
    {
      name: "分配答疑",
      count: props.data?.questionNum || 0,
    },
    {
      name: "回复答疑",
      count: props.data?.answerNum || 0,
    },
    {
      name: "完成答疑",
      count: props.data?.finishNum || 0,
    },
    {
      name: "会话轮次",
      count: props.data?.sessionNum || 0,
    },
  ];
});
const now = new Date();
const currentYear = ref(now.getFullYear());
const currentMonth = ref(now.getMonth() + 1);
const staticMinYear = ref(currentYear.value);
const staticMinMonth = ref(currentMonth.value);
const staticYear = ref(currentYear.value);
const staticMonth = ref(currentMonth.value);

const staticsDateInfo = computed(() => {
  return `${staticYear.value}年${staticMonth.value}月`;
});

const preEnable = computed(() => {
  if (staticYear.value === currentYear.value) {
    return true;
  } else {
    return staticMonth.value > staticMinMonth.value;
  }
});

const nextEnable = computed(() => {
  if (staticYear.value === currentYear.value) {
    return staticMonth.value < currentMonth.value;
  } else {
    return true;
  }
});

if (currentMonth.value < 12) {
  staticMinYear.value -= 1;
} else {
  staticMinMonth.value = 1;
}

onLoad((options) => {});

const selectPreMonth = () => {
  if (staticYear.value === currentYear.value) {
    if (staticMonth.value === 1) {
      staticMonth.value = 12;
      staticYear.value = currentYear.value - 1;
      confirmSelectStaticDate();
    } else {
      staticMonth.value -= 1;
      confirmSelectStaticDate();
    }
  } else if (staticYear.value < currentYear.value) {
    if (staticMonth.value > staticMinMonth.value) {
      staticMonth.value -= 1;
      confirmSelectStaticDate();
    }
  }
};
const selectNextMonth = () => {
  if (staticYear.value === currentYear.value) {
    if (staticMonth.value < currentMonth.value) {
      staticMonth.value++;
      confirmSelectStaticDate();
    }
  } else if (staticYear.value < currentYear.value) {
    if (staticMonth.value === 12) {
      staticMonth.value = 1;
      staticYear.value = currentYear.value;
      confirmSelectStaticDate();
    } else {
      staticMonth.value += 1;
      confirmSelectStaticDate();
    }
  }
};

const confirmSelectStaticDate = () => {
  let date = `${staticYear.value}-${staticMonth.value}`;
  if (staticMonth.value < 10) {
    date = `${staticYear.value}-0${staticMonth.value}`;
  }
  emit("selectStaticDate", date);
};

onMounted(() => {
  confirmSelectStaticDate();
});

const emit = defineEmits(["selectStaticDate"]);
</script>

<style lang="scss" scoped>
.qaStatics {
  margin-top: 24rpx;
  margin-left: 24rpx;
  width: calc(100vw - 48rpx);
  height: 368rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .top {
    padding: 24rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40rpx;
    &-icon {
      width: 40rpx;
      height: 40rpx;
    }
    &-title {
      padding-left: 8rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #111111;
      line-height: 40rpx;
    }
    &-right {
      position: relative;
      margin-left: auto;
      display: flex;
      flex-direction: row;
      align-items: center;
      &-title {
        padding-left: 4rpx;
        padding-right: 4rpx;
        font-size: 24rpx;
        color: #666666;
        line-height: 30rpx;
      }
      &-arrowLeft {
        // width: 28rpx;
        // height: 28rpx;
        margin-right: 6rpx;
      }
      &-arrowLeftClick {
        position: relative;
        right: -44rpx;
        width: 76rpx;
        height: 28rpx;
      }
      &-arrowRight {
        margin-left: 6rpx;
        // width: 28rpx;
        // height: 28rpx;
      }

      &-arrowRightClick {
        position: absolute;
        width: 76rpx;
        height: 28rpx;
        right: -24rpx;
      }
    }
  }
  .dateSelectDsabled {
    opacity: 0.5;
    background: red;
  }
}
</style>
